<template>
  <div class="service-content">
    <!-- 产品与服务 -->
    <div class="service-top">
      <div class="text banner">
        <p>产品与服务</p>
        <p>作为一家多元化的高科技企业，致力于为客户提供全面的技术解决方案和服务。</p>
      </div>
    </div>
    <div class="service-box banner">
      <!-- <div class="title">服务中心</div> -->
      <h2 class="title">我们的服务</h2>
      <div class="service-grid">
        <div class="service-card">
          <img src="../../assets/xc-img/office.png" alt="">
          <h3>办公用品</h3>
          <p>选择合适的办公用品，让工作更舒适。</p>
        </div>
        <div class="service-card">
          <img src="../../assets/xc-img/soft.png" alt="">
          <h3>软件开发</h3>
          <p>定制化软件开发，满足您的独特需求。</p>
        </div>
        <div class="service-card">
          <img src="../../assets/xc-img/zixun.png" alt="">
          <h3>技术咨询</h3>
          <p>解决网络建设、网络安全等问题，提升企业的信息化水平</p>
        </div>
        <div class="service-card">
          <img src="../../assets/xc-img/xitong.png" alt="">
          <h3>系统集成</h3>
          <p>提供一站式的计算机信息系统集成服务。</p>
        </div>
        <div class="service-card">
          <img src="../../assets/xc-img/xiaofang.png" alt="">
          <h3>消防设备</h3>
          <p>提供各种消防设备、及安装、维护和检测服务。</p>
        </div>
        <div class="service-card">
          <img src="../../assets/xc-img/weixiu.png" alt="">
          <h3>销售与维修</h3>
          <p>销售各类计算机软硬件及辅助设备等，并提供专业的维修服务。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Service',
  // data() {
  //   return {
  //     homePicList: [
  //       { id: 1, title: '技术推广', picUrl: require('@/assets/xc-img/home_03.png'), content: '信策科技专注于将最新的科技成果转化为实际应用，通过技术推广服务帮助企业和个人提高工作效率和生活质量。我们不仅提供技术咨询，还致力于技术转让和技术推广，确保客户能够充分利用前沿技术。' },
  //       { id: 2, title: '系统集成', picUrl: require('@/assets/xc-img/home_02.png'), content: '我们提供一站式的计算机信息系统集成服务，包括系统设计、配置、安装和维护。无论是企业资源规划（ERP）系统还是客户关系管理（CRM）系统，信策科技都能提供定制化的解决方案，满足不同规模企业的需求。' },
  //       { id: 3, title: '技术咨询', picUrl: require('@/assets/xc-img/home_01.png'), content: '在这个信息爆炸的时代，信策科技提供专业的互联网信息技术咨询服务，帮助客户解决网络建设、数据管理、网络安全等问题，提升企业的信息化水平。' },
  //       { id: 4, title: '消防设备', picUrl: require('@/assets/xc-img/home_04.png'), content: '安全是我们最关心的问题之一。信策科技销售各种消防设备，包括灭火器、消防栓、烟雾探测器、应急照明系统等。我们还提供消防系统的安装、维护和检测服务，确保客户的安全防护体系始终处于最佳状态。' },
  //       { id: 5, title: '办公用品', picUrl: require('@/assets/xc-img/home_05.png'), content: '我们的办公用品系列包括各类文具、办公设备、打印耗材和会议用品等。信策科技致力于提供高效、便捷的办公解决方案，帮助企业和个人提高工作效率。我们还提供定制服务，为客户打造具有企业特色的办公用品套装。' },
  //       { id: 6, title: '销售与维修', picUrl: require('@/assets/xc-img/home_06.png'), content: '我们销售各类计算机软硬件及辅助设备、办公自动化设备、安防设备等，并提供专业的维修服务。信策科技确保您购买的每一件产品都能得到最好的性能和最长的使用寿命。' }
  //     ],
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.service-content {
  .service-top {

    width: 100%;
    height: 360px;
    padding: 110px 0 0;
    margin-top: 110px;
    background: url('../../assets/xc-img/banner_02.png');
    // background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-size: 100% 100%;
    /* 宽度和高度都设置为容器的100% */
    .text {
      color: #FFFFFF;

      p:nth-child(1) {
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 36px;
        margin-bottom: 23px;
      }

      p:nth-child(2) {
        font-size: 22px;
        font-family: Microsoft YaHei;
      }
    }
  }

  .service-box {

    // -----------------------
    margin-top: 80px;

    .title {
      color: #31322C;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      text-align: center;
      font-size: 40px;
      margin-bottom: 72px;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;

      .service-card {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        text-align: center;
        text-align: center;
        
        h3 {
          font-weight: bold;
        }
        // .service-card i {
        //   font-size: 2.5rem;
        //   color: #007bff;
        //   margin-bottom: 1rem;
        // }
      }
    }
  }
}
</style>